<template>

    <div class="clock" style="display:none">
        <div class="hour"></div>
        <span class="padding">:</span>
        <div class="min"></div>
        <span class="padding">:</span>
        <div class="sec"></div>
    </div>



</template>

<script setup>
import { onMounted } from "@vue/runtime-core";
onMounted(() => {

    setTimeout(
        function () {
            let clock = document.querySelector('.clock')
            clock.style.display = 'flex'
            let ywant = '2022-11-30 00:00:00';
            setInterval(function () {
                let now = new Date().getTime();
                // 倒计时目标时间
                let target = new Date(ywant).getTime()
                var diff = target - now;
                if (diff > 0) {
                    let days = parseInt(diff / (1000 * 60 * 60 * 24));
                    // 获取不足一天的毫秒数
                    var diff = diff % (1000 * 60 * 60 * 24);
                    let hour = parseInt(diff / (1000 * 60 * 60));
                    diff = diff % ((1000 * 60 * 60))
                    let minute = parseInt(diff / (1000 * 60));
                    diff = diff % ((1000 * 60))
                    let seconds = parseInt(diff / 1000);
                    document.querySelector('.sec').innerText = seconds;
                    document.querySelector('.hour').innerText = hour;
                    document.querySelector('.min').innerText = minute;
                } else {
                    diff = 0
                    document.querySelector('.sec').innerText = 0;
                    document.querySelector('.hour').innerText = 0;
                    document.querySelector('.min').innerText = 0;
                }


            }, 1)
        }
        , 2000)

})
// var span = document.getElementsByTagName('span');

//     setInterval(function () {
//         //现在的时间
//         var now =new Date().getTime();
//         //你想倒计时的时间
//         var  ywant = new Date('2022-11-22 00:00:00').getTime();
//         //获取到要倒计时的毫秒数,相差的时间
//         var diff=ywant-now;
//         //获取到天数
//         var  days = parseInt(diff/(60*1000*60*24));
//         span[0].innerHTML=days+"天";
//         //获取剩余一天的毫秒数
//         var diff = diff%(60*1000*60*24);
//         //微秒数/一小时微秒数 得到小时
//         hour =parseInt(diff/(60*60*1000));
//         span[1].innerHTML=hour+"小时";
//         //获取剩余一小时的毫秒数
//          diff =diff%(60*1000*60);
//         //剩余一小时的毫秒数/每分钟 = 分钟
//         var minute =parseInt(diff/(60*1000));
//         //赋值到html
//         span[2].innerHTML=minute+"分钟"
//         //获取剩余一分钟的毫秒数
//         diff = diff%(60*1000);
//         //剩余一分钟的毫秒数/每毫秒 = 秒数
//         var second = parseInt(diff/1000);
//         //赋值到html
//         span[3].innerHTML=second+"秒"
//         // //获取毫秒
//         // diff = diff%1000;
//         // //直接赋值到html
//         // span[4].innerHTML=diff;
//     },1000)



</script>

<style lang="scss">
.clock {
    display: flex;
    width: 120px;
    justify-content: space-evenly;
    align-items: center;
    margin: 30px auto;

    >div {
        width: 25%;
        height: auto;
        background: black;
        color: #fff;
        font-weight: bold;
        font-size: 24px;
        text-align: center;
        line-height: 30px;
        padding: 10px 5px;
        border-radius: 10px;
        box-shadow: 0 0 10px #b7b5b5a3;
    }

    .padding {
        color: black;
    }
}
</style>
